<template>
    <div></div>
</template>
  
<script>

import { defineComponent, ref } from "vue";
// 引入表单子控件的管理类
import formItemManage from "../controlManage/formItemManage";
// 引入组件需要的属性
import { baseFormProps, baseStyleProps } from "../formItemMeta.js";

// 表单控件的基类，具体控件需继承本基组件
export default defineComponent({
    name: "el-form-base-item",
    props: {
        ...baseFormProps,
        ...baseStyleProps
    },
    emits: ["myChange", "input", "change", "blur", "focus"],
    
    setup(props, context) {
        console.log(props);
        // 动态样式
        let dynStyle = (()=>{
            return {
                labelStyle : {
                    color: props.caption_color, 
                    width: props.caption_width+'px', 
                    marginRight: props.caption_margin_right+'px'
                },
                inputStyle : {
                    width: props.caption_position==='top'?'100%':'calc(100% - '+(props.caption_width+props.caption_margin_right)+'px)'
                }
            }
        })();
        let handleChange = (val)=>{
            context.emit('myChange', val);
        }
        // 继承的子组件无需在返回下列属性
        return {
            props,
            dynStyle,
            handleChange,
            ...formItemManage(props, context),
        };
    },
});
    
</script>
